<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>设置权限</legend>
</fieldset>
<div class="layui-form-item">
    <div class="layui-inline" >
        <form class="layui-form"  lay-filter="example"  >
            <input type="text" id="id" hidden name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色标识</label>
                <div class="layui-input-inline">
                    <div id="per_tree" lay-filter="per"></div>
                </div>
            </div>

            <!--提交按钮-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" lay-demo="getChecked">立即提交</button>
                </div>
            </div>

        </form>
    </div>
</div>
<script  src="../../../layui/layui.js" ></script>
<script src="../../../layui/layui.all.js"  ></script>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/common.js"></script>
<script>
    layui.use(['tree', 'util'], function() {
        var tree = layui.tree;
        var util = layui.util;
        var form = layui.form;
        var roleId =getUrlParam("roleId");
        var roleName =getUrlParam("roleName");
        var arr = [];//存放勾选集合
        console.log(roleName);
        tree.render({
            elem: '#per_tree',
            data: getData(),
            id: 'per_tree',
            showCheckbox: true,     //是否显示复选框
            spread: true
        });
        function getData(){
            var data = [];
            $.ajax({
                url: "/sysPer/layuiTree",    //后台数据请求地址
                type: "post",
                async:false,
                success: function(resut){
                    data = resut.data;
                    form.render(); //重新渲染
                }
            });
            return data;
        }
        // 从后台拿到权限数据，回显tree
        $(function(){
            $.get("/sysPer/findPerByRoleId?roleId="+roleId,function(data){
                console.log(data);
                if(data){
                    tree.setChecked('per_tree', data.data);
                }
            });
        });
        //为input赋值
         form.val('example', {
             "id": roleId // "name": "value"
             ,"name": roleName
         });
        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                var checkData = tree.getChecked('per_tree');
                for(i in checkData){
                    arr.push(checkData[i].id);
                    if(checkData[i].children.length>0){
                        for(j in checkData[i].children){
                            arr.push(checkData[i].children[j].id);
                                if(checkData[i].children[j].children.length>0){
                                    for(k in checkData[i].children[j].children){
                                        arr.push(checkData[i].children[j].children[k].id);
                                    }
                                }
                        }
                    }
                }
                $.ajax({
                    type:"post",
                    url:"/sysPer/updatePer",
                    traditional:true,
                    data: {
                        arr :arr ,rid : roleId
                    },//表单数据
                    success:function(d){
                        if(d.code ==1){
                            /* layer.msg("更新成功！"); */
                            //当你在iframe页面关闭自身时
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            //layer信息提示
                            layer.msg(d.msg);//下面是关键代码
                            setTimeout(function () { parent.layer.close(index) }, 330);//延迟

                        }
                       else{
                            layer.msg('保存异常!');
                        }
                        setTimeout(function (){

                            window.parent.location.reload();
                        }, 500);
                    }
                })
            }
        });
    })

</script>
</body>
</html>